<template>
        <div class="father">
                <SelfInput v-model="userName"/>
                <br>
                <!-- 组件标签上v-model 的本质 -->
                <SelfInput :model-value="userName" @update:model-value="userName = $event"/>
                <!-- 也可以更换value，例如改成abc-->
                <SelfInputTemp v-model:abc="password"></SelfInputTemp>
                   <!-- 上面代码的本质如下 -->
                <SelfInputTemp :abc="password" @update:abc="password = $event" />

        </div>
</template>
<script setup lang="ts">
import SelfInput from './SelfInput.vue'
import SelfInputTemp from './SelfInputTemp.vue';
import {ref} from 'vue'

let userName = ref()
let password = ref()
</script>
<style scoped>
.father {
        background: #ffe8e8;
        padding: 10px;
        box-shadow: 0 0 10px black;
        border-radius: 10px;
        margin: 0 10px;
}
</style>